```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础详情页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            color: #333;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1440px;
            margin: 0 auto;
            padding: 2rem;
            background-color: #fff;
            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
        }
        .header {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }
        .section {
            margin-bottom: 2rem;
        }
        .table {
            width: 100%;
            border-collapse: collapse;
        }
        .table th,
        .table td {
            border: 1px solid #ddd;
            padding: 0.5rem;
            text-align: left;
        }
        .table th {
            background-color: #f9f9f9;
        }
        .status-dot {
            display: inline-block;
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
            margin-right: 0.5rem;
        }
        .status-dot.pending {
            background-color: #ffcc00;
        }
        .status-dot.success {
            background-color: #00cc00;
        }
    </style>
</head>
<body class="theme-light" data-layout="fluid" data-grid-columns="12">
    <div class="container" data-antd-component="Layout">
        <h2 class="header" data-antd-component="Typography.Title">基础详情页</h2>
        
        <div class="section" data-antd-component="Card">
            <h3 data-antd-component="Typography.Title">退款申请</h3>
            <div class="info" data-antd-component="Descriptions">
                <p data-antd-component="Descriptions.Item" data-antd-props='{"label":"取货单号"}'>1000000000</p>
                <p data-antd-component="Descriptions.Item" data-antd-props='{"label":"状态"}'>已取货</p>
                <p data-antd-component="Descriptions.Item" data-antd-props='{"label":"销售单号"}'>1234123421</p>
                <p data-antd-component="Descriptions.Item" data-antd-props='{"label":"子订单"}'>3214321432</p>
            </div>
        </div>
        
        <div class="section" data-antd-component="Card">
            <h3 data-antd-component="Typography.Title">用户信息</h3>
            <div class="info" data-antd-component="Descriptions">
                <p data-antd-component="Descriptions.Item" data-antd-props='{"label":"用户姓名"}'>付小小</p>
                <p data-antd-component="Descriptions.Item" data-antd-props='{"label":"联系电话"}'>18100000000</p>
                <p data-antd-component="Descriptions.Item" data-antd-props='{"label":"常用快递"}'>菜鸟仓储</p>
                <p data-antd-component="Descriptions.Item" data-antd-props='{"label":"取货地址"}'>浙江省杭州市西湖区万塘路18号</p>
                <p data-antd-component="Descriptions.Item" data-antd-props='{"label":"备注"}'>无</p>
            </div>
        </div>
        
        <div class="section" data-antd-component="Card">
            <h3 data-antd-component="Typography.Title">退货商品</h3>
            <table class="table" data-antd-component="Table" data-antd-props='{"columns":[{"title":"商品编号","dataIndex":"productId"},{"title":"商品名称","dataIndex":"productName"},{"title":"商品条码","dataIndex":"barcode"},{"title":"单价","dataIndex":"price"},{"title":"数量（件）","dataIndex":"quantity"},{"title":"金额","dataIndex":"amount"}]}'>
                <thead>
                    <tr>
                        <th>商品编号</th>
                        <th>商品名称</th>
                        <th>商品条码</th>
                        <th>单价</th>
                        <th>数量（件）</th>
                        <th>金额</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1234561</td>
                        <td>矿泉水550ml</td>
                        <td>12421432143214321</td>
                        <td>2.00</td>
                        <td>1</td>
                        <td>2.00</td>
                    </tr>
                    <tr>
                        <td>1234562</td>
                        <td>凉茶300ml</td>
                        <td>12421432143214322</td>
                        <td>3.00</td>
                        <td>2</td>
                        <td>6.00</td>
                    </tr>
                    <tr>
                        <td>1234563</td>
                        <td>好吃的薯片</td>
                        <td>12421432143214323</td>
                        <td>7.00</td>
                        <td>4</td>
                        <td>28.00</td>
                    </tr>
                    <tr>
                        <td>1234564</td>
                        <td>特别好吃的蛋卷</td>
                        <td>12421432143214324</td>
                        <td>8.50</td>
                        <td>3</td>
                        <td>25.50</td>
                    </tr>
                    <tr>
                        <td colspan="4">总计</td>
                        <td>10</td>
                        <td>61.5</td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <div class="section" data-antd-component="Card">
            <h3 data-antd-component="Typography.Title">退货进度</h3>
            <table class="table" data-antd-component="Table" data-antd-props='{"columns":[{"title":"时间","dataIndex":"time"},{"title":"当前进度","dataIndex":"progress"},{"title":"状态","dataIndex":"status"},{"title":"操作员ID","dataIndex":"operatorId"},{"title":"耗时","dataIndex":"duration"}]}'>
                <thead>
                    <tr>
                        <th>时间</th>
                        <th>当前进度</th>
                        <th>状态</th>
                        <th>操作员ID</th>
                        <th>耗时</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>2017-10-01 14:10</td>
                        <td>联系客户</td>
                        <td><span class="status-dot pending"></span>进行中</td>
                        <td>取货员 ID1234</td>
                        <td>5mins</td>
                    </tr>
                    <tr>
                        <td>2017-10-01 14:05</td>
                        <td>取货员出发</td>
                        <td><span class="status-dot success"></span>成功</td>
                        <td>取货员 ID1234</td>
                        <td>1h</td>
                    </tr>
                    <tr>
                        <td>2017-10-01 13:05</td>
                        <td>取货员接单</td>
                        <td><span class="status-dot success"></span>成功</td>
                        <td>取货员 ID1234</td>
                        <td>5mins</td>
                    </tr>
                    <tr>
                        <td>2017-10-01 13:00</td>
                        <td>申请审批通过</td>
                        <td><span class="status-dot success"></span>成功</td>
                        <td>系统</td>
                        <td>1h</td>
                    </tr>
                    <tr>
                        <td>2017-10-01 12:00</td>
                        <td>发起退货申请</td>
                        <td><span class="status-dot success"></span>成功</td>
                        <td>用户</td>
                        <td>5mins</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
```